<template>
  <div>
    <div v-if="show" class="overlay">
      <slot>
      </slot>
    </div>
  </div>
</template>
<script>
export default{
  props:{
    show:{
      type:Boolean,
      default:() => {
        return false
      }
    },
  },
  methods:{
    toggleShow(){
      this.show = !this.show
    }
  },
  //在父元素使用
  // watch:{
  //   //让OverLay的遮罩层下面的元素不随上面的内容滚动
  //   show(a){
  //     if(a){
  //       document.body.style.position = 'fixed'
  //     }else{
  //       document.body.style.position = 'static'
  //     }
  //   }
  // }
}
</script>
<style lang='less' scoped>
.overlay{
  z-index:99;
  background: rgba(0, 0, 0, 0.54);
  position: fixed;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>